<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>佣金跟踪</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
    <div class="min-h-screen">
        <!-- 佣金概览 -->
        <div class="bg-gradient-to-r from-blue-500 to-blue-600 p-6">
            <div class="max-w-md mx-auto text-white">
                <h2 class="text-xl mb-4">佣金概览</h2>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <div class="text-3xl font-bold">¥0.00</div>
                        <div class="text-sm opacity-80">可提现佣金</div>
                    </div>
                    <div>
                        <div class="text-3xl font-bold">¥0.00</div>
                        <div class="text-sm opacity-80">累计佣金</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="max-w-md mx-auto -mt-6">
            <!-- 提现操作 -->
            <div class="bg-white rounded-lg shadow-lg p-6 mb-6">
                <button class="w-full bg-blue-600 text-white py-3 rounded-lg mb-4">申请提现</button>
                <div class="text-sm text-gray-500 text-center">
                    提现金额满100元可申请提现，预计1-3个工作日到账
                </div>
            </div>

            <!-- 佣金明细 -->
            <div class="bg-white rounded-lg shadow-lg p-6 mb-6">
                <div class="flex justify-between items-center mb-6">
                    <h3 class="text-lg font-bold">佣金明细</h3>
                    <div class="flex space-x-2">
                        <select class="border rounded px-2 py-1 text-sm">
                            <option>全部状态</option>
                            <option>待结算</option>
                            <option>已结算</option>
                            <option>已提现</option>
                        </select>
                        <select class="border rounded px-2 py-1 text-sm">
                            <option>最近7天</option>
                            <option>最近30天</option>
                            <option>最近90天</option>
                        </select>
                    </div>
                </div>

                <!-- 佣金列表 -->
                <div class="space-y-4">
                    <!-- 示例佣金记录 -->
                    <div class="border rounded-lg p-4">
                        <div class="flex justify-betwx zen items-start mb-3">
                            <div>
                                <h4 class="font-medium">北京三日游完全攻略</h4>
                                <p class="text-sm text-gray-500 mt-1">订单号：2024031500001</p>
                            </div>
                            <div class="text-right">
                                <div class="text-red-500 font-medium">+¥59.80</div>
                                <div class="text-sm text-gray-500 mt-1">佣金比例：10%</div>
                            </div>
                        </div>
                        <div class="flex justify-between text-sm text-gray-500">
                            <div>订单金额：¥598</div>
                            <div>待结算</div>
                        </div>
                    </div>

                    <!-- 示例佣金记录 -->
                    <div class="border rounded-lg p-4">
                        <div class="flex justify-between items-start mb-3">
                            <div>
                                <h4 class="font-medium">上海外滩精选路线</h4>
                                <p class="text-sm text-gray-500 mt-1">订单号：2024031500002</p>
                            </div>
                            <div class="text-right">
                                <div class="text-red-500 font-medium">+¥29.90</div>
                                <div class="text-sm text-gray-500 mt-1">佣金比例：15%</div>
                            </div>
                        </div>
                        <div class="flex justify-between text-sm text-gray-500">
                            <div>订单金额：¥199</div>
                            <div>已结算</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 提现记录 -->
            <div class="bg-white rounded-lg shadow-lg p-6 mb-6">
                <h3 class="text-lg font-bold mb-4">提现记录</h3>
                <div class="space-y-4">
                    <div class="text-center text-gray-500 py-8">
                        暂无提现记录
                    </div>
                </div>
            </div>

            <!-- 佣金规则 -->
            <div class="bg-white rounded-lg shadow-lg p-6">
                <h3 class="text-lg font-bold mb-4">佣金规则</h3>
                <div class="space-y-3 text-sm text-gray-600">
                    <div class="flex items-start">
                        <div class="w-6 h-6 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center flex-shrink-0 mr-3">1</div>
                        <div>佣金比例：不同产品佣金比例不同，一般为订单金额的5%-15%</div>
                    </div>
                    <div class="flex items-start">
                        <div class="w-6 h-6 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center flex-shrink-0 mr-3">2</div>
                        <div>佣金结算：订单完成后自动结算佣金，结算后即可提现</div>
                    </div>
                    <div class="flex items-start">
                        <div class="w-6 h-6 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center flex-shrink-0 mr-3">3</div>
                        <div>提现门槛：累计佣金满100元可申请提现</div>
                    </div>
                    <div class="flex items-start">
                        <div class="w-6 h-6 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center flex-shrink-0 mr-3">4</div>
                        <div>提现方式：支持提现至微信零钱或银行卡</div>
                    </div>
                    <div class="flex items-start">
                        <div class="w-6 h-6 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center flex-shrink-0 mr-3">5</div>
                        <div>到账时间：提现申请审核通过后1-3个工作日内到账</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>